<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { initMap3d } from '../lib/map3d';
import { initMap2d } from '../lib/map2d';
import { env } from '../lib/env';
import { App, makeObject3DUiConfig } from 'vjmap3d';

const buttonVisible = ref(false);
const treeVisible = ref(false);
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
const dataSource = ref<Tree[]>([])
let app: App;
onMounted(async () => {
  // 创建一个URL对象
  const url = new URL(window.location.href);
  // 使用URLSearchParams获取查询参数
  const params = new URLSearchParams(url.search);
  const map2d = params.get('map2d'); 
  // 如果直接传入了mapid
  const mapid = params.get('mapid'); 
  if (mapid) {
    env.mapId = mapid;
  }
  // 如果直接传入了mapid的版本
  const version = params.get('version'); 
  if (version) {
    env.version = version;
  }
  // 如果直接传入了工作区
  const workspace = params.get('workspace'); 
  if (workspace) {
    env.workspace = workspace;
  }
  const scaleZ = params.get('scaleZ'); 
  if (scaleZ) {
    env.scaleZ = +scaleZ || 1;
  }
  const baseZ = params.get('baseZ'); 
  if (baseZ) {
    env.baseZ = +baseZ;
  }
  const gridHelper = params.get('gridHelper'); 
  if (gridHelper) {
    env.gridHelper = gridHelper == "true";
  }
  const darkTheme = params.get('darkTheme'); 
  if (darkTheme) {
    env.darkTheme = darkTheme === "true";
  }
  const mapopenway = params.get('mapopenway'); 
  if (mapopenway) {
    env.mapopenway = mapopenway;
  }
  let background = params.get('background'); 
  if (background) {
    if (background.substring(0) != "#") {
      background = "#" + background;
    }
    env.background = background;
  }
  if (params.get('showMousePositionControl') === "false") {
    env.showMousePositionControl = false;
  }
  if (params.get('showBaseMap') === "false") {
    env.showBaseMap = false;
  }
  if (params.get('showVertexColors') === "true") {
    env.showVertexColors = true;
  }
  if (params.get('showWireframe') === "true") {
    env.showWireframe = true;
  }
 
  if (map2d === "true") {
    // 2d地图模式, 3d做为一个图层
    app = await initMap2d();
  } else {
    // 纯3d模式
    app = await initMap3d() as App;
  }
  showSceneData(app);
  buttonVisible.value = true
})

const showSceneData = (app: App) => {
  // 递归函数遍历场景并生成JSON格式
  const traverseScene = (object: any) => {
      const children = object.children.map((child: any) => traverseScene(child));
      // @ts-ignore
      if (object.visible) defaultCheckedKeys.value.push(object.uuid)
      return {
          id: object.uuid,
          label: `${object.type} ${object.name} ${object.uuid}`,
          children: children.length > 0 ? children : undefined
      };
  }
  defaultCheckedKeys.value = [];
  // @ts-ignore
  defaultExpandedKeys.value = [app.scene.uuid];
  dataSource.value = [traverseScene(app.scene)]
}


  

const onTreeCheck = (data: Tree) => {
  let obj = app.scene.getObjectByProperty("uuid", data.id);
  if (obj) obj.visible = !obj.visible
}

const onNodeChick = async (data: Tree) => {
  let obj = app.scene.getObjectByProperty("uuid", data.id);
  if (!obj) return
  const ui = await app.getConfigPane({
      style: {
          right: "160px"
      }
  })
  ui.reset();
  if (obj == app.scene) {
    // 如果是根场景，则把属性面板关了
    ui.setVisible(false);
    return;
  }
  ui.setVisible(true)
  let config;
  config = makeObject3DUiConfig(obj)
  ui.appendChild(config)
}

const showSceneTree = () => {
  treeVisible.value = !treeVisible.value
  if (dataSource.value.length == 0) {
    showSceneData(app)
  }
}
const defaultCheckedKeys = ref([])
const defaultExpandedKeys = ref([])
</script>

<template>
  <div id="map3dContainer"></div>
  <el-button class="button" type="primary" @click="showSceneTree">显示场景树</el-button>
  <el-tree  class="tree"
     v-if="treeVisible"
      :data="dataSource"
      show-checkbox
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultCheckedKeys"
      :expand-on-click-node="false"
      @check="onTreeCheck"
      @node-click="onNodeChick"
    >
   </el-tree>
</template>

<style scoped>
#map3dContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000117;
}
.button {
  position: absolute;
  top: 60px;
  left: 5px;
  width: 80px;
}
.tree {
  position: absolute;
  top: 100px;
  left: 5px;
  width: 260px;
  height: 400px;
  overflow-x: auto;
}
</style>
